<template>
    <el-row class="productmanagedetail">
        <el-col :span="24" class="content-header">商品管理--商品详情
            <span class="left-10">
                <el-button type="text" @click="global.goPage($router, 'productmanage', {});">返回</el-button>
            </span>
        </el-col>
        <el-card class="box">
            <el-tabs tab-position="top" style="height: 100%;">
                <el-tab-pane label="基本信息">
                    <el-form :model="productBasicInfo" :label-position="labelPosition" label-width="100px">
                        <el-col :span="12">
                            <el-form-item label="ERP编号">
                                <el-input v-model="productBasicInfo.erpId" disabled ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="条形码">
                                <el-input v-model="productBasicInfo.barCode" disabled ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="名称">
                                <el-input v-model="productBasicInfo.name" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="类别">
                                <el-input v-model="productBasicInfo.category" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="单位">
                                <el-input v-model="productBasicInfo.unit" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="是否新品">
                                <el-select v-model="productBasicInfo.isNew" disabled>
                                    <el-option label="是" value="1"></el-option>
                                    <el-option label="否" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="是否打包">
                                <el-select v-model="productBasicInfo.isPackage" disabled>
                                    <el-option label="是" value="1"></el-option>
                                    <el-option label="否" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="打包数量">
                                <el-input v-model="productBasicInfo.packageNumber" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="重量">
                                <el-input v-model="productBasicInfo.weight" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="商品品牌">
                                <el-select v-model="productBasicInfo.brandId" disabled>
                                    <el-option label="品牌1" value="1"></el-option>
                                    <el-option label="品牌2" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="简介">
                                <el-input type="textarea" v-model="productBasicInfo.synopsis" disabled style="width : 100%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="主图">
                                <img :src="mainFile.url" :title="mainFile.name" height="150" width="150"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="采购价">
                                <el-input v-model="productBasicInfo.purchasePrice" disabled></el-input>
                            </el-form-item>
                        </el-col>  
                        <el-col :span="12">
                            <el-form-item label="零售价">
                                <el-input v-model="productBasicInfo.retailPrice" disabled></el-input>
                            </el-form-item>
                        </el-col>  
                        <el-col :span="12">
                            <el-form-item label="所属账套">
                                <el-select v-model="productBasicInfo.accountType" disabled>
                                    <el-option label="账套一" value="1"></el-option>
                                    <el-option label="账套二" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col> 
                        <el-col :span="12">
                        <el-form-item label="销量">
                            <el-input v-model="productBasicInfo.salesVolume" disabled></el-input>
                        </el-form-item>
                        </el-col>
                        <el-col :span="24">
                        <el-form-item label="页面标题">
                            <el-input v-model="productBasicInfo.pageTitle" disabled></el-input>
                        </el-form-item>
                        </el-col>
                        <el-col :span="24">
                        <el-form-item label="页面描述">
                            <el-input v-model="productBasicInfo.pageDescribe" disabled></el-input>
                        </el-form-item>
                        </el-col>
                        <el-col :span="24">
                        <el-form-item label="页面关键字">
                            <el-input v-model="productBasicInfo.pageKeyword" disabled></el-input>
                        </el-form-item>
                        </el-col>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="商品介绍">
                    <el-row>
                        <el-col :span="24">
                            <div ref="introduce"></div>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="商品图片">
                    <el-row>
                        <el-col :span="6" v-for="(pic, index) in picList" :key="pic.name" class="button-10">
                            <img :src="pic.url" :title="pic.name" height="150" width="150" />
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="商品属性">商品属性</el-tab-pane>
                <el-tab-pane label="商品参数">商品参数</el-tab-pane>
            </el-tabs>
        </el-card>
    </el-row>
</template>
<script>

import './detail.scss';
import router from '@/router/index';

export default {
    data() {
        return {
            labelPosition: "rigth",
            productBasicInfo: {
                erpId: "",
                barCode: "",
                name: "",
                category: "",
                unit: "",
                isNew: "",
                isPackage: "",
                packageNumber: "",
                weight: "",
                brandId: "",
                synopsis: "",
                purchasePrice: "",
                retailPrice: "",
                accountType: "",
                salesVolume: "",
                pageTitle: "",
                pageDescribe: "",
                pageKeyword: "",

                introduce : "<p>内容介绍</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>"
            },
            mainFile : { name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' },
            picList : [{
                name: 'food.jpeg', 
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            },{
                name: 'food.jpeg', 
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            },{
                name: 'food.jpeg', 
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            },{
                name: 'food.jpeg', 
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            },{
                name: 'food.jpeg', 
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            },{
                name: 'food.jpeg', 
                url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
            }],
        }
    },
    methods: {
        init : function(){
            this.$refs.introduce.innerHTML = this.productBasicInfo.introduce;
        }
    },
    watch: {

    },
    mounted: function() {
        this.init();
    },
    created: function() {
        this.productNo = this.$route.params.productNo;
        console.info(this.productNo);
    },
    beforeDestroy: function() {

    }
}
</script>